<style>
    .m-wizard.m-wizard--1 .m-wizard__head .m-wizard__nav .m-wizard__steps .m-wizard__step .m-wizard__step-line > span {
        width: 3.5rem;
    }

    .m-icon {
        font-size: 1.5rem;
    }

    .btn-group-sm > .btn, .btn-ssm {
        padding: .2rem .5rem;
        font-size: .875rem;
        line-height: 1.3;
        border-radius: .2rem;
    }

    .m-accordion.m-accordion--section .m-accordion__item .m-accordion__item-body .m-accordion__item-content kt-grid__item kt-grid__item--fluid, .m-accordion.m-accordion--section .m-accordion__item .m-accordion__item-body > span {
        padding-top: 1.5rem;
    }
</style>
<div class="kt-container  {$theme_layout_class}  kt-grid__item kt-grid__item--fluid">
    <div class="row">
        <div class="kt-portlet kt-portlet--mobile ">
            <div class="kt-portlet__head">
                <div class="kt-portlet__head-label">
                    <h3 class="kt-portlet__head-title">
                        提交工单
                    </h3>
                </div>
                <div class="kt-portlet__head-toolbar">
                    <ul class="nav nav-pills nav-pills--success m-nav-pills--align-right m-nav-pills--btn-pill m-nav-pills--btn-sm"
                        role="tablist">
                        <li class="nav-item m-tabs__item">
                            <a class="nav-link m-tabs__link active" href="{:url('ticket/my/index')}">
                                我的工单
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="kt-portlet__body">
                <div class="m-wizard m-wizard--1 m-wizard--success" id="m_wizard">

                    <!--end: Message container -->

                    <!--begin: Form Wizard Head -->
                    <div class="m-wizard__head kt-portlet__padding-x">

                        <!--begin: Form Wizard Progress -->
                        <div class="m-wizard__progress">
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0"
                                     aria-valuemax="100" style="width: calc(50% + 26px);"></div>
                            </div>
                        </div>

                        <!--end: Form Wizard Progress -->

                        <!--begin: Form Wizard Nav -->
                        <div class="m-wizard__nav">
                            <div class="m-wizard__steps">
                                <div class="m-wizard__step m-wizard__step--done" m-wizard-target="m_wizard_form_step_1">
                                    <div class="m-wizard__step-info">
                                        <a href="#" class="m-wizard__step-number">
											<span>
												<span>1</span>
											</span>
                                        </a>
                                        <div class="m-wizard__step-line">
                                            <span></span>
                                        </div>
                                        <div class="m-wizard__step-label">
                                            选择问题所属产品
                                        </div>
                                        <div class="m-wizard__step-line">
                                            <span></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="m-wizard__step m-wizard__step--done" m-wizard-target="m_wizard_form_step_2">
                                    <div class="m-wizard__step-info">
                                        <a href="#" class="m-wizard__step-number">
											<span>
												<span>2</span>
											</span>
                                        </a>
                                        <div class="m-wizard__step-line">
                                            <span></span>
                                        </div>
                                        <div class="m-wizard__step-label">
                                            选择问题类型
                                        </div>
                                        <div class="m-wizard__step-line">
                                            <span></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="m-wizard__step m-wizard__step--current"
                                     m-wizard-target="m_wizard_form_step_3">
                                    <div class="m-wizard__step-info">
                                        <a href="#" class="m-wizard__step-number">
											<span>
												<span>3</span>
											</span>
                                        </a>
                                        <div class="m-wizard__step-line">
                                            <span></span>
                                        </div>
                                        <div class="m-wizard__step-label">
                                            推荐解决方案
                                        </div>
                                        <div class="m-wizard__step-line">
                                            <span></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="m-wizard__step" m-wizard-target="m_wizard_form_step_4">
                                    <div class="m-wizard__step-info">
                                        <a href="#" class="m-wizard__step-number">
											<span>
												<span>4</span>
											</span>
                                        </a>
                                        <div class="m-wizard__step-line">
                                            <span></span>
                                        </div>
                                        <div class="m-wizard__step-label">
                                            创建工单
                                        </div>
                                        <div class="m-wizard__step-line">
                                            <span></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!--end: Form Wizard Nav -->
                    </div>

                    <!--end: Form Wizard Head -->

                    <!--begin: Form Wizard Form-->
                    <div class="m-wizard__form">

                        <!--
                            1) Use m-form--label-align-left class to alight the form input lables to the right
                            2) Use m-form--state class to highlight input control borders on form validation
                        -->
                        <form class="m-form m-form--label-align-left- m-form--state-" id="m_form">

                            <!--begin: Form Body -->
                            <div class="kt-portlet__body">

                                <!--begin: Form Wizard Step 1-->
                                <div class="m-wizard__form-step m-wizard__form-step--current" id="m_wizard_form_step_1">
                                    <div class="alert alert-metal m-alert m-alert--icon m-alert--air m-alert--square kt-margin-bottom-30 kt-font-danger"
                                         role="alert">
                                        <div class="m-alert__icon">
                                            <i class="fa fa-exclamation-1"></i>
                                        </div>
                                        <div class="m-alert__text">
                                            <div class="m-list-timeline m-list-timeline--skin-light">
                                                <div class="m-list-timeline__items">
                                                    <div class="m-list-timeline__item">
                                                        <span class="m-list-timeline__badge m-list-timeline__badge--success"></span>
                                                        <span class="m-list-timeline__text">1. 点此查看：快速修改账号绑定手机号码</span>
                                                    </div>
                                                    <div class="m-list-timeline__item">
                                                        <span class="m-list-timeline__badge m-list-timeline__badge--info"></span>
                                                        <span class="m-list-timeline__text">2. 点此查看：快速修改账号的密码
																	<span class="m-badge m-badge--success m-badge--wide">pending</span>
																</span>
                                                    </div>
                                                    <div class="m-list-timeline__item">
                                                        <span class="m-list-timeline__badge m-list-timeline__badge--danger"></span>
                                                        <span class="m-list-timeline__text">3. 点此查看：如何将个人实名认证升级成企业实名认证</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="m-separator m-separator--fit"></div>
                                    <div class="row">
                                        <div class="col-xl-6">

                                            <!--begin:: Widgets/Audit Log-->
                                            <div class="kt-portlet kt-portlet--height-fluid ">
                                                <div class="kt-portlet__head">
                                                    <div class="kt-portlet__head-label">
                                                        <h3 class="kt-portlet__head-title">
                                                            请选择您遇到的问题分类
                                                        </h3>
                                                    </div>
                                                </div>
                                                <div class="kt-portlet__body">
                                                    <div class="m-accordion m-accordion--default m-accordion--solid m-accordion--section  m-accordion--toggle-arrow"
                                                         id="m_accordion_7" role="tablist">

                                                        <!--begin::Item-->
                                                        <div class="m-accordion__item">
                                                            <div class="m-accordion__item-head collapsed" role="tab"
                                                                 id="m_accordion_7_item_1_head" data-toggle="collapse"
                                                                 href="#m_accordion_7_item_1_body"
                                                                 aria-expanded="    false">
															<span class="m-accordion__item-icon">
																<i class="la fa fa-user-ok"></i>
															</span>
                                                                <span class="m-accordion__item-title">手机/邮箱换绑咨询</span>
                                                                <span class="m-accordion__item-mode"></span>
                                                            </div>
                                                            <div class="m-accordion__item-body collapse"
                                                                 id="m_accordion_7_item_1_body" role="tabpanel"
                                                                 aria-labelledby="m_accordion_7_item_1_head"
                                                                 data-parent="#m_accordion_7">
                                                                <div class="m-accordion__item-content  kt-grid__item kt-grid__item--fluid">
                                                                    <div class="m-stack m-stack--ver m-stack--general m-stack--demo">
                                                                        <div class="m-stack__item m-stack__item--center m-stack__item--middle m-stack__item--fluid">
                                                                            <p>
                                                                                <span>推荐以下解决方案</span>
                                                                            </p>
                                                                            <div class="m-list-timeline m-list-timeline--skin-light">
                                                                                <div class="m-list-timeline__items">
                                                                                    <div class="m-list-timeline__item">
                                                                                        <span class="m-list-timeline__badge m-list-timeline__badge--success"></span>
                                                                                        <span class="m-list-timeline__text">1. 【推荐】如何设置和修改绑定手机？</span>
                                                                                    </div>
                                                                                    <div class="m-list-timeline__item">
                                                                                        <span class="m-list-timeline__badge m-list-timeline__badge--info"></span>
                                                                                        <span class="m-list-timeline__text">2. 如何修改和设置绑定邮箱？</span>
                                                                                    </div>
                                                                                    <div class="m-list-timeline__item">
                                                                                        <span class="m-list-timeline__badge m-list-timeline__badge--danger"></span>
                                                                                        <span class="m-list-timeline__text">3. 雅虎邮箱相关问题？</span>
                                                                                    </div>
                                                                                    <div class="m-list-timeline__item">
                                                                                        <span class="m-list-timeline__badge m-list-timeline__badge--accent"></span>
                                                                                        <span class="m-list-timeline__text">4. 如何修改账号的密码？</span>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="m-stack__item m-stack__item--center m-stack__item--middle"
                                                                             style="width: 150px;">
                                                                            <a href="{:url('ticket/index/submit')}"
                                                                               class="btn btn-outline-success btn-lg">创建工单</a>
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                            </div>
                                                        </div>

                                                        <!--end::Item-->

                                                        <!--begin::Item-->
                                                        <div class="m-accordion__item">
                                                            <div class="m-accordion__item-head collapsed" role="tab"
                                                                 id="m_accordion_7_item_2_head" data-toggle="collapse"
                                                                 href="#m_accordion_7_item_2_body"
                                                                 aria-expanded="    false">
															<span class="m-accordion__item-icon">
																<i class="la  fa fa-placeholder"></i>
															</span>
                                                                <span class="m-accordion__item-title"> 账号实名认证咨询</span>
                                                                <span class="m-accordion__item-mode"></span>
                                                            </div>
                                                            <div class="m-accordion__item-body collapse"
                                                                 id="m_accordion_7_item_2_body" role="tabpanel"
                                                                 aria-labelledby="m_accordion_7_item_2_head"
                                                                 data-parent="#m_accordion_7">
                                                                <div class="m-accordion__item-content  kt-grid__item kt-grid__item--fluid">
                                                                    <div class="m-stack m-stack--ver m-stack--general m-stack--demo">
                                                                        <div class="m-stack__item m-stack__item--center m-stack__item--middle m-stack__item--fluid">
                                                                            <p>
                                                                                <span>推荐以下解决方案</span>
                                                                            </p>
                                                                            <div class="m-list-timeline m-list-timeline--skin-light">
                                                                                <div class="m-list-timeline__items">
                                                                                    <div class="m-list-timeline__item">
                                                                                        <span class="m-list-timeline__badge m-list-timeline__badge--success"></span>
                                                                                        <span class="m-list-timeline__text">1. 【推荐】如何设置和修改绑定手机？</span>
                                                                                    </div>
                                                                                    <div class="m-list-timeline__item">
                                                                                        <span class="m-list-timeline__badge m-list-timeline__badge--info"></span>
                                                                                        <span class="m-list-timeline__text">2. 如何修改和设置绑定邮箱？</span>
                                                                                    </div>
                                                                                    <div class="m-list-timeline__item">
                                                                                        <span class="m-list-timeline__badge m-list-timeline__badge--danger"></span>
                                                                                        <span class="m-list-timeline__text">3. 雅虎邮箱相关问题？</span>
                                                                                    </div>
                                                                                    <div class="m-list-timeline__item">
                                                                                        <span class="m-list-timeline__badge m-list-timeline__badge--accent"></span>
                                                                                        <span class="m-list-timeline__text">4. 如何修改账号的密码？</span>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="m-stack__item m-stack__item--center m-stack__item--middle"
                                                                             style="width: 150px;">
                                                                            <a href="{:url('ticket/index/submit')}"
                                                                               class="btn btn-outline-success btn-lg">创建工单</a>
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                            </div>
                                                        </div>

                                                        <!--end::Item-->

                                                        <!--begin::Item-->
                                                        <div class="m-accordion__item">
                                                            <div class="m-accordion__item-head collapsed" role="tab"
                                                                 id="m_accordion_7_item_3_head" data-toggle="collapse"
                                                                 href="#m_accordion_7_item_3_body"
                                                                 aria-expanded="    false">
															<span class="m-accordion__item-icon">
																<i class="la  fa fa-alert-2"></i>
															</span>
                                                                <span class="m-accordion__item-title">账号密码咨询</span>
                                                                <span class="m-accordion__item-mode"></span>
                                                            </div>
                                                            <div class="m-accordion__item-body collapse"
                                                                 id="m_accordion_7_item_3_body" role="tabpanel"
                                                                 aria-labelledby="m_accordion_7_item_3_head"
                                                                 data-parent="#m_accordion_7">
                                                                <div class="m-accordion__item-content  kt-grid__item kt-grid__item--fluid">
                                                                    <div class="m-stack m-stack--ver m-stack--general m-stack--demo">
                                                                        <div class="m-stack__item m-stack__item--center m-stack__item--middle m-stack__item--fluid">
                                                                            <p>
                                                                                <span>推荐以下解决方案</span>
                                                                            </p>
                                                                            <div class="m-list-timeline m-list-timeline--skin-light">
                                                                                <div class="m-list-timeline__items">
                                                                                    <div class="m-list-timeline__item">
                                                                                        <span class="m-list-timeline__badge m-list-timeline__badge--success"></span>
                                                                                        <span class="m-list-timeline__text">1. 【推荐】如何设置和修改绑定手机？</span>
                                                                                    </div>
                                                                                    <div class="m-list-timeline__item">
                                                                                        <span class="m-list-timeline__badge m-list-timeline__badge--info"></span>
                                                                                        <span class="m-list-timeline__text">2. 如何修改和设置绑定邮箱？</span>
                                                                                    </div>
                                                                                    <div class="m-list-timeline__item">
                                                                                        <span class="m-list-timeline__badge m-list-timeline__badge--danger"></span>
                                                                                        <span class="m-list-timeline__text">3. 雅虎邮箱相关问题？</span>
                                                                                    </div>
                                                                                    <div class="m-list-timeline__item">
                                                                                        <span class="m-list-timeline__badge m-list-timeline__badge--accent"></span>
                                                                                        <span class="m-list-timeline__text">4. 如何修改账号的密码？</span>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="m-stack__item m-stack__item--center m-stack__item--middle"
                                                                             style="width: 150px;">
                                                                            <a href="{:url('ticket/index/submit')}"
                                                                               class="btn btn-outline-success btn-lg">创建工单</a>
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                            </div>
                                                        </div>

                                                        <!--end::Item-->
                                                    </div>
                                                </div>
                                            </div>

                                            <!--end:: Widgets/Audit Log-->
                                        </div>
                                        <div class="col-xl-6">

                                            <!--begin:: Widgets/Audit Log-->
                                            <div class="kt-portlet kt-portlet--height-fluid ">
                                                <div class="kt-portlet__head">
                                                    <div class="kt-portlet__head-label">
                                                        <h3 class="kt-portlet__head-title">
                                                            相关热点文章
                                                        </h3>
                                                    </div>
                                                    <div class="kt-portlet__head-toolbar">
                                                        <ul class="kt-portlet__nav">
                                                            <li class="kt-portlet__nav-item">
                                                                <a href="#"
                                                                   class="kt-portlet__nav-link btn btn-accent m-btn m-btn--icon m-btn--icon-only m-btn--pill"
                                                                   title="换一批">
                                                                    <i class="fa fa la-refresh"></i>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="kt-portlet__body">
                                                    <div class="m-list-timeline m-list-timeline--skin-light">
                                                        <div class="m-list-timeline__items">
                                                            <div class="m-list-timeline__item">
                                                                <span class="m-list-timeline__badge m-list-timeline__badge--success"></span>
                                                                <span class="m-list-timeline__text">企业实名认证</span>
                                                                <span class="m-list-timeline__time">Just now</span>
                                                            </div>
                                                            <div class="m-list-timeline__item">
                                                                <span class="m-list-timeline__badge m-list-timeline__badge--info"></span>
                                                                <span class="m-list-timeline__text">如何变更实名认证信息?
																	<span class="m-badge m-badge--success m-badge--wide">pending</span>
																</span>
                                                                <span class="m-list-timeline__time">14 mins</span>
                                                            </div>
                                                            <div class="m-list-timeline__item">
                                                                <span class="m-list-timeline__badge m-list-timeline__badge--danger"></span>
                                                                <span class="m-list-timeline__text">如何将个人实名认证变更为企业实名认证？</span>
                                                                <span class="m-list-timeline__time">20 mins</span>
                                                            </div>
                                                            <div class="m-list-timeline__item">
                                                                <span class="m-list-timeline__badge m-list-timeline__badge--accent"></span>
                                                                <span class="m-list-timeline__text">如何修改会员密码?
																	<span class="m-badge m-badge--info m-badge--wide">settled</span>
																</span>
                                                                <span class="m-list-timeline__time">1 hr</span>
                                                            </div>
                                                            <div class="m-list-timeline__item">
                                                                <span class="m-list-timeline__badge m-list-timeline__badge--warning"></span>
                                                                <span class="m-list-timeline__text">如何修改登录账号
																	<a href="#" class="m-link">Check</a>
																</span>
                                                                <span class="m-list-timeline__time">2 hrs</span>
                                                            </div>
                                                            <div class="m-list-timeline__item">
                                                                <span class="m-list-timeline__badge m-list-timeline__badge--brand"></span>
                                                                <span class="m-list-timeline__text">如何设置和修改绑定手机？</span>
                                                                <span class="m-list-timeline__time">3 hrs</span>
                                                            </div>
                                                            <div class="m-list-timeline__item">
                                                                <span class="m-list-timeline__badge m-list-timeline__badge--info"></span>
                                                                <span class="m-list-timeline__text"> 如何修改和设置绑定邮箱？</span>
                                                                <span class="m-list-timeline__time">5 hrs</span>
                                                            </div>
                                                            <div class="m-list-timeline__item">
                                                                <span class="m-list-timeline__badge m-list-timeline__badge--success"></span>
                                                                <span href="" class="m-list-timeline__text">账号管理-注册账号-个人实名认证
																	<span class="m-badge m-badge--danger m-badge--wide">urgent</span>
																</span>
                                                                <span class="m-list-timeline__time">7 hrs</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!--end:: Widgets/Audit Log-->
                                        </div>
                                    </div>
                                </div>

                                <!--end: Form Wizard Step 1-->
                            </div>

                            <!--end: Form Body -->
                        </form>
                    </div>

                    <!--end: Form Wizard Form-->
                </div>
            </div>
        </div>
    </div>
</div>
